<template>
	<vue-draggable-resizable
		v-if="sportsStore.liveEventId"
		:parent="true"
		:resizable="false"
		:w="width"
		:h="height"
		:x="x"
		:y="y"
		@dragging="onDragging">
		<div class="w-full h-full flex flex-col shadow rounded-[4px] text-t-3 overflow-hidden">
			<div class="w-full h-[38px] bg-bg-8 flex items-center px-3 app-bg-react">
				<base-image
					class="text-primary text-[14px] w-4 cursor-pointer"
					src="sports/video"></base-image>
				<div class="ml-1">{{ $t('match.liveStream') }}</div>
				<div class="flex-1"></div>
				<base-icon name="fullscreen" size="17" @click="toggleFullscreen"></base-icon>
				<base-icon name="close" size="17" class="ml-2" @click="onClose"></base-icon>
			</div>
			<div class="flex-1 bg-black">
				<iframe
					:src="liveStreamLink"
					allowfullscreen
					allowtransparency
					allow="autoplay; encrypted-media"
					style="width: 100%; height: 100%" />
			</div>
			<div class="w-full h-8 bg-bg-8 flex justify-center items-center text-sm app-bg-react">
				{{ teams }}
			</div>
		</div>
	</vue-draggable-resizable>
</template>

<script lang="ts" setup>
import { watch, ref, onMounted, computed } from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
import { useSportsStore, useMatchStore } from '@/store'
import { getLiveStream } from '@/api/betting'
import { BaseIcon, BaseImage } from '@/components/base'

defineOptions({ name: 'SportsMatchLive' })

const sportsStore = useSportsStore()
const matchStore = useMatchStore()

const minW = 400
const minH = 300

const liveStreamLink = ref('')

const isFullscreen = ref(false)

const width = ref(minW)
const height = ref(minH)

const x = ref(0)
const y = ref(0)

const teams = computed(() => {
	const match = matchStore.getMatch(sportsStore.liveEventId)
	if (match) {
		return match.homeTeamName + ' v ' + match.awayTeamName
	}
	return ''
})

const toggleFullscreen = () => {
	isFullscreen.value = !isFullscreen.value
	const w = isFullscreen.value ? document.body.clientWidth * 0.4 : minW
	const h = isFullscreen.value ? (w * minH) / minW : minH
	if (x.value > document.body.clientWidth - w) {
		x.value = document.body.clientWidth - w
	}
	if (y.value > document.body.clientHeight - h) {
		y.value = document.body.clientHeight - h
	}
	setTimeout(() => {
		width.value = w
		height.value = h
	})
}

const onDragging = (left: number, top: number) => {
	x.value = left
	y.value = top
}

const onClose = () => {
	sportsStore.setLiveStream('')
}

onMounted(() => {
	x.value = document.body.clientWidth - width.value
	y.value = document.body.clientHeight - height.value
})

const getLiveStreamData = async (eventId: string) => {
	const { data } = await getLiveStream({ eventId, host: location.host })
	const { streamLink } = data
	liveStreamLink.value = streamLink
}

watch(
	() => sportsStore.liveEventId,
	(val) => {
		if (val) {
			getLiveStreamData(val)
		} else {
			liveStreamLink.value = ''
		}
	},
	{ immediate: true }
)
</script>

<style>
.vdr {
	border: none !important;
	z-index: 999999 !important;
}
</style>
